<template>
  <div class="clientList">
        <Input v-model="value1" small placeholder="输入关键字搜索" size="default">
            <Select v-model="select1" slot="prepend" style="width: 120px">
                <Option value="day">name</Option>
                <Option value="month">age</Option>
                <Option value="sex">sex</Option>
            </Select>
            <Button slot="append" icon="ios-search"></Button>
        </Input>
        <br>
<Table border :columns="columns" :data="data1">
            <template slot-scope="{ row }" slot="name">
                <strong>{{ row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
                <Button type="error" size="small" @click="remove(index)">Delete</Button>
            </template>
        </Table>
  </div>
</template>
<script>
export default {
 data: () => ({
   value1: '',
   select1: 'day',
   columns: [
        {
            title: 'Name',
            slot: 'name',
            width: 150,
            align: 'center'
        },
        {
            title: 'Age',
            key: 'age',
            width: 150,
            align: 'center'
        },
        {
            title: 'Address',
            key: 'address',
            align: 'center'
        },
        {
            title: 'Action',
            slot: 'action',
            width: 150,
            align: 'center'
        }
    ],
    data1: [
        {
            name: 'John Brown',
            age: 18,
            address: 'New York No. 1 Lake Park'
        },
        {
            name: 'Jim Green',
            age: 24,
            address: 'London No. 1 Lake Park'
        },
        {
            name: 'Joe Black',
            age: 30,
            address: 'Sydney No. 1 Lake Park'
        },
        {
            name: 'Jon Snow',
            age: 26,
            address: 'Ottawa No. 2 Lake Park'
        }
    ]
 }),
methods: {
    show (index) {
            this.$Modal.info({
                title: 'User Info',
                content: `Name：${this.data1[index].name}<br>Age：${this.data1[index].age}<br>Address：${this.data1[index].address}`
            })
        },
        remove (index) {
            this.data1.splice(index, 1);
        }
}
};
</script>
<style lang="less" scoped>
@import "index";
</style>